<!DOCTYPE html>
<html th:replace="layout/layout"
      xmlns:th="http://www.thymeleaf.org">
<title th:fragment="titleName">首页</title>
<style th:fragment="styles">
    #chartDiv, #container {
        height: 320px;
        width: 100%;
        overflow: hidden;
    }

</style>
<div th:fragment="content">

    <div class="wrapper wrapper-content">

        <div class="row  white-bg ">
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">本日</span>
                        <h5>营业收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" id="h_FarmNum">0</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">本日</span>
                        <h5>访客量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" id="h_PigNum">0</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">本月</span>
                        <h5>新增会员</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" id="h_ResourceRate">0</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">当前</span>
                        <h5>可用房间数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" id="h_EquipmentRate">0</h1>
                    </div>
                </div>
            </div>

        </div>

        <div class="row white-bg ">
            <div class="col-lg-12" >

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <i class="fa fa-info-circle"></i> 营业收入情况
                    </div>
                    <div class="ibox-title">
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" id="todayButton" class="btn btn-xs btn-white active" onclick="getEchartMap('today')">本日</button>
                                <button type="button" id="weekButton" class="btn btn-xs btn-white"  onclick="getEchartMap('week')">本周</button>
                                <button type="button" id="monthButton" class="btn btn-xs btn-white"  onclick="getEchartMap('month')">本月</button>
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div id="chartDiv">
                            <div class="flot-chart m-b-xl">
                                <div id="container" class="flot-chart-content"></div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
        <div class="row white-bg ">
            <div class="col-lg-6" >
                <h5>最受欢迎房间排名：</h5>
                <div class="ibox-content">
                    <ul class="list-group clear-list m-t">
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="room_num_1">6次</span>
                            <span class="label label-default">1</span><span id="room_name_1">武夷山茶室</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="room_num_2">3次</span>
                            <span class="label label-info">2</span><span id="room_name_2">黄山棋牌室</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="room_num_3">3次</span>
                            <span class="label label-warning">3</span><span id="room_name_3">会议室</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="room_num_4">0次</span>
                            <span class="label label-success">4</span><span id="room_name_4">太姥山</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="room_num_5">0次</span>
                            <span class="label label-danger">5</span><span id="room_name_5">太姥山</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6" >
                <h5>产品销售排名：</h5>
                <div class="ibox-content">
                    <ul class="list-group clear-list m-t">
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="good_num_1">39瓶</span>
                            <span class="label label-default">1</span><span id="good_name_1">矿泉水</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="good_num_2">39瓶</span>
                            <span class="label label-info">2</span><span id="good_name_2">茶叶</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="good_num_3">39瓶</span>
                            <span class="label label-warning">3</span><span id="good_name_3">红牛</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="good_num_4">39瓶</span>
                            <span class="label label-success">4</span><span id="good_name_4">口香糖</span>
                        </li>
                        <li class="list-group-item fist-item">
                            <span class="pull-right" id="good_num_5">39瓶</span>
                            <span class="label label-danger">5</span><span id="good_name_5">中华香烟</span>
                        </li>

                    </ul>
                </div>

            </div>
        </div>

    </div>



</div>
<div th:fragment="scriptRef">
    <script th:src="@{/js/home/home.js}"></script>
    <script th:src="@{/js/lib/echart/echarts.min.js}"></script>
</div>
<script th:fragment="scripts" type="text/javascript">
     Home.init();
    // getEchartMap("today");

</script>
</html>